<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的菜园 - 蔬记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #2ecc71; /* 主色调：绿色（象征种植） */
            --background-color: #f8fff8; /* 页面背景色 - 淡绿色 */
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--background-color);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            background-color: white;
        }
        
        .tab-item.active {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 植物卡片悬停效果 */
        .plant-card {
            transition: all 0.3s ease;
        }
        
        .plant-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
        }
        
        /* 分类标签样式 */
        .category-tag {
            transition: all 0.3s ease;
        }
        
        .category-tag.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* 进度条动画 */
        .progress-fill {
            transition: width 1s ease-in-out;
        }
        
        /* 骨架屏动画 */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        .skeleton {
            animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        /* 滚动条隐藏 */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="min-h-screen pb-20">
    <!-- 页面头部 -->
    <header class="sticky top-0 z-10 bg-white shadow-sm">
        <div class="px-4 py-5">
            <div class="flex items-center justify-between mb-2">
                <h1 class="text-xl font-bold text-gray-800">我的菜园</h1>
                <button class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 hover:bg-green-200 transition-colors" id="addNewPlantButton">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
            <p class="text-sm text-gray-500">管理你的种植生活</p>
        </div>
        
        <!-- 分类标签 -->
        <div class="px-4 py-3 overflow-x-auto whitespace-nowrap scrollbar-hide">
            <div class="inline-flex space-x-2">
                <button class="category-tag active px-4 py-1.5 rounded-full text-sm font-medium" data-category="all">全部</button>
                <button class="category-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-category="leaf">叶菜类</button>
                <button class="category-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-category="fruit">果菜类</button>
                <button class="category-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-category="root">根茎类</button>
                <button class="category-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-category="herb">香草类</button>
                <button class="category-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-category="other">其他</button>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="px-4 py-5">
        <!-- 植物列表 -->
        <div id="plantList" class="space-y-4">
            <!-- 植物卡片将通过JavaScript动态添加 -->
            
            <!-- 加载中骨架屏 -->
            <div class="plant-card bg-white rounded-2xl p-4 shadow-sm skeleton">
                <div class="h-24 bg-gray-100 rounded-xl"></div>
            </div>
            <div class="plant-card bg-white rounded-2xl p-4 shadow-sm skeleton">
                <div class="h-24 bg-gray-100 rounded-xl"></div>
            </div>
            
            <!-- 空状态提示 -->
            <div id="emptyState" class="hidden flex flex-col items-center justify-center py-12 text-center">
                <div class="w-24 h-24 rounded-full bg-green-50 flex items-center justify-center mb-4">
                    <i class="fa fa-seedling text-4xl text-green-400"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">还没有种植任何蔬菜</h3>
                <p class="text-sm text-gray-500 mb-6">开始你的种植之旅，选择一个喜欢的蔬菜品种种植吧！</p>
                <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full transition-colors" id="goToVegetableLibraryButton">
                    浏览蔬菜库
                </button>
            </div>
            
            <!-- 推荐植物 -->
            <div id="recommendedPlantsSection" class="mt-8 hidden">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">推荐种植</h3>
                <div class="grid grid-cols-2 gap-3" id="recommendedPlants">
                    <!-- 推荐植物将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item active flex flex-col items-center py-2 px-3">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="tasks.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <!-- 植物详情模态框 -->
    <div id="plantDetailModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50" id="modalOverlay"></div>
        <div class="relative bg-white rounded-2xl max-w-md w-full mx-4 max-h-[80vh] overflow-y-auto">
            <div class="p-5" id="modalContent">
                <!-- 模态框内容将通过JavaScript动态添加 -->
            </div>
        </div>
    </div>

    <script>
        // DOM元素引用
        const plantListContainer = document.getElementById('plantList');
        const emptyState = document.getElementById('emptyState');
        const recommendedSection = document.getElementById('recommendedPlantsSection');
        const recommendedPlantsContainer = document.getElementById('recommendedPlants');
        const addNewPlantButton = document.getElementById('addNewPlantButton');
        const goToVegetableLibraryButton = document.getElementById('goToVegetableLibraryButton');
        const plantDetailModal = document.getElementById('plantDetailModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const modalContent = document.getElementById('modalContent');
        
        // 页面加载时初始化
        window.addEventListener('load', initPage);
        
        // 按钮点击事件绑定
        addNewPlantButton.addEventListener('click', goToVegetableLibrary);
        goToVegetableLibraryButton.addEventListener('click', goToVegetableLibrary);
        modalOverlay.addEventListener('click', closePlantDetailModal);
        
        // 初始化页面
        function initPage() {
            // 加载植物数据
            loadPlantData();
            
            // 绑定分类标签点击事件
            bindCategoryEvents();
            
            // 绑定ESC键关闭模态框
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    closePlantDetailModal();
                }
            });
        }
        
        // 跳转到蔬菜库
        function goToVegetableLibrary() {
            window.location.href = 'vegetable-library.html';
        }
        
        // 加载植物数据
        function loadPlantData() {
            // 从localStorage获取植物数据
            let plantsData = JSON.parse(localStorage.getItem('plants')) || [];
            
            // 如果没有植物数据，使用模拟数据用于展示
            if (plantsData.length === 0) {
                // 仅用于演示的模拟数据
                plantsData = [
                    {
                        id: '1',
                        name: '生菜',
                        type: 'leaf',
                        plantingDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
                        growthPeriod: 30,
                        lastWatered: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
                        image: 'https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?q=80&w=300&auto=format&fit=crop'
                    },
                    {
                        id: '2',
                        name: '西红柿',
                        type: 'fruit',
                        plantingDate: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString(),
                        growthPeriod: 60,
                        lastWatered: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
                        image: 'https://images.unsplash.com/photo-1587044351052-e6656a0732e5?q=80&w=300&auto=format&fit=crop'
                    },
                    {
                        id: '3',
                        name: '胡萝卜',
                        type: 'root',
                        plantingDate: new Date(Date.now() - 40 * 24 * 60 * 60 * 1000).toISOString(),
                        growthPeriod: 70,
                        lastWatered: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
                        image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=300&auto=format&fit=crop'
                    }
                ];
                
                // 保存到localStorage供后续使用
                localStorage.setItem('plants', JSON.stringify(plantsData));
            }
            
            // 根据当前选中的分类筛选植物
            const activeCategory = document.querySelector('.category-tag.active').getAttribute('data-category');
            const filteredPlants = activeCategory === 'all' ? plantsData : plantsData.filter(plant => plant.type === activeCategory);
            
            // 显示或隐藏空状态
            if (filteredPlants.length === 0) {
                emptyState.classList.remove('hidden');
                recommendedSection.classList.remove('hidden');
                loadRecommendedPlants();
            } else {
                emptyState.classList.add('hidden');
                recommendedSection.classList.add('hidden');
            }
            
            // 清空植物列表
            plantListContainer.innerHTML = '';
            
            // 创建植物卡片
            filteredPlants.forEach(plant => {
                const plantCard = createPlantCard(plant);
                plantListContainer.appendChild(plantCard);
                
                // 添加淡入动画
                plantCard.style.opacity = '0';
                plantCard.style.transform = 'translateY(20px)';
                plantCard.style.transition = 'all 0.5s ease';
                
                setTimeout(() => {
                    plantCard.style.opacity = '1';
                    plantCard.style.transform = 'translateY(0)';
                }, 100);
            });
        }
        
        // 创建植物卡片
        function createPlantCard(plant) {
            const card = document.createElement('div');
            card.className = 'plant-card bg-white rounded-2xl overflow-hidden shadow-sm';
            
            // 获取生长天数
            const growthDays = getGrowthDays(plant.plantingDate);
            
            // 获取生长状态
            const growthStatus = getGrowthStatus(plant, growthDays);
            
            // 检查是否需要浇水
            const needsWatering = needsWateringCheck(plant);
            
            // 根据植物类型获取图标
            const plantTypeIcon = getPlantTypeIcon(plant.type);
            
            card.innerHTML = `
                <div class="p-4">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex items-center space-x-3">
                            <div class="w-16 h-16 rounded-xl overflow-hidden bg-gray-100">
                                <img src="${plant.image || 'https://images.unsplash.com/photo-1599837507177-6007383f49d7?q=80&w=200&auto=format&fit=crop'}" alt="${plant.name}" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <div class="flex items-center space-x-2">
                                    <h4 class="font-semibold text-gray-800">${plant.name}</h4>
                                    <span class="text-xs bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded">${plantTypeIcon}</span>
                                </div>
                                <div class="flex items-center mt-1">
                                    <span class="text-xs text-gray-500">${growthDays}天 · ${growthStatus.status}</span>
                                    ${needsWatering ? '<span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">需要浇水</span>' : ''}
                                </div>
                            </div>
                        </div>
                        <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors" data-plant-id="${plant.id}" onclick="showPlantActions('${plant.id}')">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    
                    <!-- 生长进度 -->
                    <div class="mb-3">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-xs text-gray-500">生长进度</span>
                            <span class="text-xs font-medium text-gray-700">${growthStatus.progress}%</span>
                        </div>
                        <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                            <div class="progress-fill h-full bg-green-500" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <!-- 预计收获日期 -->
                    <div class="text-xs text-gray-500">
                        <i class="fa fa-calendar-o mr-1"></i> 预计收获日期：${getExpectedHarvestDate(plant)}
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="bg-gray-50 px-4 py-3 flex justify-between">
                    <button class="flex items-center justify-center bg-green-50 text-green-600 text-sm px-3 py-1.5 rounded-full hover:bg-green-100 transition-colors" onclick="addPlantLog('${plant.id}')">
                        <i class="fa fa-pencil mr-1"></i> 记录
                    </button>
                    <button class="flex items-center justify-center bg-blue-50 text-blue-600 text-sm px-3 py-1.5 rounded-full hover:bg-blue-100 transition-colors" onclick="waterPlant('${plant.id}')">
                        <i class="fa fa-tint mr-1"></i> 浇水
                    </button>
                    <button class="flex items-center justify-center bg-purple-50 text-purple-600 text-sm px-3 py-1.5 rounded-full hover:bg-purple-100 transition-colors" onclick="fertilizePlant('${plant.id}')">
                        <i class="fa fa-leaf mr-1"></i> 施肥
                    </button>
                </div>
            `;
            
            // 点击卡片显示详情
            card.addEventListener('click', function(e) {
                // 如果点击的不是按钮，显示详情
                if (!e.target.closest('button')) {
                    showPlantDetailModal(plant);
                }
            });
            
            // 触发进度条动画
            setTimeout(() => {
                const progressFill = card.querySelector('.progress-fill');
                progressFill.style.width = `${growthStatus.progress}%`;
            }, 300);
            
            return card;
        }
        
        // 根据植物类型获取图标
        function getPlantTypeIcon(type) {
            const icons = {
                'leaf': '<i class="fa fa-leaf"></i>',
                'fruit': '<i class="fa fa-pagelines"></i>',
                'root': '<i class="fa fa-tree"></i>',
                'herb': '<i class="fa fa-leaf"></i>',
                'other': '<i class="fa fa-seedling"></i>'
            };
            
            return icons[type] || '<i class="fa fa-seedling"></i>';
        }
        
        // 获取生长天数
        function getGrowthDays(plantingDate) {
            const planting = new Date(plantingDate);
            const now = new Date();
            const diffTime = Math.abs(now - planting);
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            return diffDays;
        }
        
        // 获取生长状态
        function getGrowthStatus(plant, growthDays) {
            const growthPeriod = plant.growthPeriod || 60;
            const progress = Math.min(100, Math.floor((growthDays / growthPeriod) * 100));
            
            let status = '生长中';
            let statusColor = 'bg-yellow-100 text-yellow-600';
            
            if (progress >= 100) {
                status = '已成熟';
                statusColor = 'bg-green-100 text-green-600';
            } else if (progress >= 80) {
                status = '即将成熟';
                statusColor = 'bg-green-100 text-green-600';
            } else if (progress <= 10) {
                status = '发芽期';
                statusColor = 'bg-blue-100 text-blue-600';
            }
            
            return { status, progress, statusColor };
        }
        
        // 检查是否需要浇水
        function needsWateringCheck(plant) {
            if (!plant.lastWatered) return true;
            
            const lastWatered = new Date(plant.lastWatered);
            const now = new Date();
            const diffTime = Math.abs(now - lastWatered);
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            
            return diffDays >= 2; // 超过2天没浇水需要提醒
        }
        
        // 获取预计收获日期
        function getExpectedHarvestDate(plant) {
            const planting = new Date(plant.plantingDate);
            const growthPeriod = plant.growthPeriod || 60;
            const harvestDate = new Date(planting);
            harvestDate.setDate(planting.getDate() + growthPeriod);
            
            // 格式化日期
            return harvestDate.toLocaleDateString('zh-CN');
        }
        
        // 植物操作相关函数
        function showPlantActions(plantId) {
            // 在实际应用中，可以显示一个操作菜单
            const actions = ['查看详情', '添加记录', '浇水', '施肥', '收获', '移除'];
            const action = prompt('请选择操作：\n' + actions.map((a, i) => `${i+1}. ${a}`).join('\n'));
            
            if (action === '1') {
                const plantsData = JSON.parse(localStorage.getItem('plants')) || [];
                const plant = plantsData.find(p => p.id === plantId);
                if (plant) showPlantDetailModal(plant);
            } else if (action === '2') addPlantLog(plantId);
            else if (action === '3') waterPlant(plantId);
            else if (action === '4') fertilizePlant(plantId);
            else if (action === '5') harvestPlant(plantId);
            else if (action === '6') removePlant(plantId);
        }
        
        function addPlantLog(plantId) {
            window.location.href = `logs.html?plantId=${plantId}`;
        }
        
        function waterPlant(plantId) {
            // 更新植物的最后浇水时间
            let plantsData = JSON.parse(localStorage.getItem('plants')) || [];
            const plantIndex = plantsData.findIndex(p => p.id === plantId);
            
            if (plantIndex !== -1) {
                plantsData[plantIndex].lastWatered = new Date().toISOString();
                localStorage.setItem('plants', JSON.stringify(plantsData));
                
                // 重新加载植物数据以更新UI
                loadPlantData();
                showToast('已浇水');
            }
        }
        
        function fertilizePlant(plantId) {
            // 在实际应用中，可以记录施肥操作
            showToast('施肥记录已添加');
        }
        
        function harvestPlant(plantId) {
            // 在实际应用中，可以处理收获逻辑
            if (confirm('确认收获此植物？')) {
                showToast('收获成功！');
            }
        }
        
        function removePlant(plantId) {
            if (confirm('确认移除此植物？')) {
                let plantsData = JSON.parse(localStorage.getItem('plants')) || [];
                plantsData = plantsData.filter(p => p.id !== plantId);
                localStorage.setItem('plants', JSON.stringify(plantsData));
                loadPlantData();
                showToast('植物已移除');
            }
        }
        
        // 绑定分类标签事件
        function bindCategoryEvents() {
            const categoryTags = document.querySelectorAll('.category-tag');
            
            categoryTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 移除所有标签的active状态
                    categoryTags.forEach(t => {
                        t.classList.remove('active');
                        t.classList.add('bg-gray-100');
                        t.classList.add('text-gray-700');
                    });
                    
                    // 添加当前标签的active状态
                    this.classList.add('active');
                    this.classList.remove('bg-gray-100');
                    this.classList.remove('text-gray-700');
                    
                    // 重新加载植物数据
                    loadPlantData();
                });
            });
        }
        
        // 加载推荐植物
        function loadRecommendedPlants() {
            // 推荐植物数据
            const recommendedPlants = [
                {
                    id: 'rec1',
                    name: '生菜',
                    type: 'leaf',
                    growthPeriod: 30,
                    difficulty: '简单',
                    image: 'https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?q=80&w=300&auto=format&fit=crop'
                },
                {
                    id: 'rec2',
                    name: '西红柿',
                    type: 'fruit',
                    growthPeriod: 60,
                    difficulty: '中等',
                    image: 'https://images.unsplash.com/photo-1587044351052-e6656a0732e5?q=80&w=300&auto=format&fit=crop'
                },
                {
                    id: 'rec3',
                    name: '薄荷',
                    type: 'herb',
                    growthPeriod: 45,
                    difficulty: '简单',
                    image: 'https://images.unsplash.com/photo-1548435408-4d3171d4a43e?q=80&w=300&auto=format&fit=crop'
                },
                {
                    id: 'rec4',
                    name: '胡萝卜',
                    type: 'root',
                    growthPeriod: 70,
                    difficulty: '中等',
                    image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=300&auto=format&fit=crop'
                }
            ];
            
            // 清空推荐植物容器
            recommendedPlantsContainer.innerHTML = '';
            
            // 创建推荐植物卡片
            recommendedPlants.forEach(plant => {
                const plantCard = document.createElement('div');
                plantCard.className = 'bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow';
                plantCard.innerHTML = `
                    <div class="h-24 overflow-hidden">
                        <img src="${plant.image}" alt="${plant.name}" class="w-full h-full object-cover">
                    </div>
                    <div class="p-3">
                        <div class="flex items-center justify-between">
                            <h4 class="font-medium text-gray-800">${plant.name}</h4>
                            <span class="text-xs bg-green-100 text-green-600 px-1.5 py-0.5 rounded">${plant.difficulty}</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">生长期约${plant.growthPeriod}天</p>
                    </div>
                `;
                
                // 添加点击事件
                plantCard.addEventListener('click', function() {
                    goToVegetableLibrary();
                });
                
                recommendedPlantsContainer.appendChild(plantCard);
            });
        }
        
        // 显示植物详情模态框
        function showPlantDetailModal(plant) {
            // 获取生长天数
            const growthDays = getGrowthDays(plant.plantingDate);
            
            // 获取生长状态
            const growthStatus = getGrowthStatus(plant, growthDays);
            
            // 检查是否需要浇水
            const needsWatering = needsWateringCheck(plant);
            
            // 获取上次浇水时间
            const lastWatered = plant.lastWatered ? new Date(plant.lastWatered).toLocaleDateString('zh-CN') : '未记录';
            
            // 设置模态框内容
            modalContent.innerHTML = `
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-800">${plant.name}详情</h3>
                    <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500" onclick="closePlantDetailModal()">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <div class="mb-5">
                    <div class="w-full h-48 rounded-xl overflow-hidden bg-gray-100 mb-4">
                        <img src="${plant.image || 'https://images.unsplash.com/photo-1599837507177-6007383f49d7?q=80&w=200&auto=format&fit=crop'}" alt="${plant.name}" class="w-full h-full object-cover">
                    </div>
                    
                    <!-- 基本信息 -->
                    <div class="space-y-3 mb-5">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-500">种植日期</span>
                            <span class="text-sm font-medium text-gray-800">${new Date(plant.plantingDate).toLocaleDateString('zh-CN')}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-500">生长天数</span>
                            <span class="text-sm font-medium text-gray-800">${growthDays}天</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-500">生长期</span>
                            <span class="text-sm font-medium text-gray-800">${plant.growthPeriod}天</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-500">上次浇水</span>
                            <span class="text-sm font-medium text-gray-800">${lastWatered}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-500">预计收获</span>
                            <span class="text-sm font-medium text-gray-800">${getExpectedHarvestDate(plant)}</span>
                        </div>
                    </div>
                    
                    <!-- 生长进度 -->
                    <div class="mb-5">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-sm text-gray-500">生长进度</span>
                            <span class="text-sm font-medium text-gray-800">${growthStatus.progress}%</span>
                        </div>
                        <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
                            <div class="progress-fill h-full bg-green-500" style="width: ${growthStatus.progress}%"></div>
                        </div>
                        <div class="mt-1 flex justify-end">
                            <span class="text-xs ${growthStatus.statusColor} px-2 py-0.5 rounded-full">${growthStatus.status}</span>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="grid grid-cols-2 gap-3">
                    <button class="flex items-center justify-center bg-blue-50 text-blue-600 py-2.5 rounded-xl hover:bg-blue-100 transition-colors" onclick="waterPlant('${plant.id}'); closePlantDetailModal()">
                        <i class="fa fa-tint mr-2"></i> 浇水
                    </button>
                    <button class="flex items-center justify-center bg-purple-50 text-purple-600 py-2.5 rounded-xl hover:bg-purple-100 transition-colors" onclick="fertilizePlant('${plant.id}'); closePlantDetailModal()">
                        <i class="fa fa-leaf mr-2"></i> 施肥
                    </button>
                    <button class="flex items-center justify-center bg-green-50 text-green-600 py-2.5 rounded-xl hover:bg-green-100 transition-colors" onclick="addPlantLog('${plant.id}')">
                        <i class="fa fa-pencil mr-2"></i> 添加记录
                    </button>
                    <button class="flex items-center justify-center bg-orange-50 text-orange-600 py-2.5 rounded-xl hover:bg-orange-100 transition-colors" onclick="harvestPlant('${plant.id}'); closePlantDetailModal()">
                        <i class="fa fa-cutlery mr-2"></i> 收获
                    </button>
                </div>
            `;
            
            // 显示模态框
            plantDetailModal.classList.remove('hidden');
            
            // 添加淡入动画
            setTimeout(() => {
                plantDetailModal.querySelector('.bg-black').classList.add('bg-opacity-50');
            }, 10);
        }
        
        // 关闭植物详情模态框
        function closePlantDetailModal() {
            plantDetailModal.classList.add('hidden');
        }
        
        // 显示提示消息
        function showToast(message) {
            // 检查是否已存在toast元素
            let toast = document.querySelector('.toast-message');
            
            if (!toast) {
                // 创建toast元素
                toast = document.createElement('div');
                toast.className = 'toast-message fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-sm px-4 py-2 rounded-lg shadow-lg z-50';
                document.body.appendChild(toast);
            }
            
            // 设置消息内容
            toast.textContent = message;
            
            // 显示toast
            toast.style.display = 'block';
            toast.style.opacity = '0';
            toast.style.transform = 'translate(-50%, -10px)';
            toast.style.transition = 'all 0.3s ease';
            
            // 触发淡入动画
            setTimeout(() => {
                toast.style.opacity = '1';
                toast.style.transform = 'translate(-50%, 0)';
            }, 10);
            
            // 2秒后隐藏
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transform = 'translate(-50%, -10px)';
                
                setTimeout(() => {
                    toast.style.display = 'none';
                }, 300);
            }, 2000);
        }
    </script>
    
    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="#" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium" onclick="return false;">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="stats.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bar-chart text-lg"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>
</body>
</html>
